<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="userAccount"
        name="userAccount"
        label="账号"
        placeholder="请输入账号"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="userPassword"
        type="password"
        name="userPassword"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit"> 提交</van-button>
    </div>
  </van-form>

  <van-button round block type="warning" @click="onLogout"> 退出</van-button>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import { showFailToast, showSuccessToast } from 'vant'
import { userLogin, userLogout } from '@/api'
import { useUserStore } from '@/store/userStore'

const router = useRouter()
const route = useRoute()

const userAccount = ref('')
const userPassword = ref('')

const onSubmit = async () => {
  let user = { userAccount: userAccount.value, userPassword: userPassword.value }
  // userLogin(user).then((res) => {
  //   if (res.code === 0 && res.data) {
  //     Toast.success('登录成功')
  //   }
  // })
  const res = await userLogin(user)
  if (res.code === 0 && res.data) {
    showSuccessToast('登录成功')
    // 用户信息存储到store
    useUserStore().$state.loginUser = res.data
    const userStore = useUserStore()
    console.log(userStore.loginUser)
  } else {
    showFailToast('登录失败')
  }
}

const onLogout = async () => {
  const res = await userLogout()
  if (res.code === 0) {
    showSuccessToast('退出成功')
    // 清除store
    const userStore = useUserStore()
    userStore.logout()
  }
}
</script>

<style scoped></style>
